html,body{
	margin: 0;
	font-family: "Bitter",serif;
	text-align: center;
	height: 100%;
	padding: 0;
	overflow: hidden;
}
.wrap,.first,.second,.third{
	width: 100%;
	height: 100%;
}
.first{
	background-color: #60e08c;
}
.second{
	background-color: #00a1f0;
}
.third{
	background-color: #ff75c6;
}
.first,.second,.third{
	position: absolute;
}
.second,.third{
	opacity: 0;
}
.wrap{
	position: relative;
	z-index: 1;
}
.first{
	animation: first 10s infinite;
	background: linear-gradient();
	z-index: 10;
}
@keyframes first{
	0%{
		opacity: 1;
	}
	10%{
		opacity: 0.8;
	}
	20%{
		opacity: 0.6;
	}
	30%{
		opacity: 0.4;
	}
	40%{
		opacity: 0.2;
	}
	50%{
		opacity: 0.1;
	}
	60%{
		opacity: 0.2;
	}
	70%{
		opacity: 0.4;
	}
	80%{
		opacity: 0.6;
	}
	90%{
		opacity: 0.8;
	}
	100%{
		opacity: 1;
	}
}
.second{
	animation: second 10s infinite;
	background: linear-gradient(#19eaa6,#00a1f0);
	z-index: 20;
}
@keyframes second{
	0%{
		opacity: 0;
	}
	10%{
		opacity: 0.2;
	}
	20%{
		opacity: 0.4;
	}
	30%{
		opacity: 0.6;
	}
	40%{
		opacity: 0.8;
	}
	50%{
		opacity: 1;
	}
	60%{
		opacity: 0.8;
	}
	70%{
		opacity: 0.6;
	}
	80%{
		opacity: 0.4;
	}
	90%{
		opacity: 0.2;
	}
	100%{
		opacity: 0;
	}
}
.third{
	animation: third 10s infinite;
	animation-delay: 8s;
	background: linear-gradient(#aab7f8,#ff75c6);
	z-index: 30;
}
@keyframes third{
	0%{
		opacity: 0;
	}
	10%{
		opacity: 0.2;
	}
	20%{
		opacity: 0.4;
	}
	30%{
		opacity: 0.6;
	}
	40%{
		opacity: 0.8;
	}
	50%{
		opacity: 1;
	}
	60%{
		opacity: 0.8;
	}
	70%{
		opacity: 0.6;
	}
	80%{
		opacity: 0.4;
	}
	90%{
		opacity: 0.2;
	}
	100%{
		opacity: 0;
	}
}
.box{
	position: absolute;
	width: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1000;
}